<template>
  <div>
    <div class="app_card mb-2 pt-4  pb-4">
      <!-- 权限 -->
      <!-- v-if="authStore.hasCode('SysConfigs.save')" -->
      <div class="d-flex justify-content-between align-items-center">
        <div class="flex-grow-1">

          <el-radio-group class="radio_button" v-model="radioPassage" @change="floorChange">
            <el-radio-button label="-1">老师通道</el-radio-button>
            <el-radio-button label="-2">讲台通道</el-radio-button>
            <el-radio-button label="-3">学生通道</el-radio-button>
          </el-radio-group>
        </div>
        <div class="d-flex">
          <el-button type="primary" @click="goBack"><el-icon>
              <ArrowLeft />
            </el-icon>返回</el-button>

        </div>
      </div>
    </div>

    <el-row :gutter="0">
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <div class="app_card  pt-2  pb-5">
          <div style="height:calc(100vh - 280px);overflow-y: scroll;">
            <div class="text-15 my-3">8号教学楼 - 一楼</div>
            <el-row class="w100">
              <el-col :span="24">
                <video class="w100 rounded-4" style="height:calc(100vh - 330px);min-height:300px" controls>
                  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
                  Your browser does not support the video tag.
                </video>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="6">
        <div class="app_card  pt-2  pb-5 ml-4">
          <div style="height:calc(100vh - 280px);overflow-y: scroll;">
            <el-table stripe :data="dataOfTable">
              <el-table-column label="设备名称" minWidth="100">
                <template #default="scope">
                  {{scope.row.name}}
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120" align='right'>
                <template #default="scope">
                  <el-switch v-model="scope.row.repairStatus" inline-prompt active-value="1" inactive-value="0" active-text="开" inactive-text="关" />
                </template>
              </el-table-column>
            </el-table>
            <el-row class="mt-3">
              <el-col :span="12" class="t-l pl-3">
                <el-button type="primary" plain>上课</el-button>
              </el-col>
              <el-col :span="12" class="t-r pr-3">
                <el-button type="primary" plain>下课</el-button>
              </el-col>
            </el-row>

            <el-card class="mt-3" shadow="never">
              <div class="pb-3 text-14">课程名称:名称</div>
              <div class="pb-3 text-14">授课老师:名称</div>
            </el-card>
            <el-card class="mt-3" shadow="never">
              <div class="pb-3 text-14">温度:23℃ </div>
              <div class="pb-3 text-14">湿度:60%</div>
              <div class="pb-3 text-14">PM2.5:100μg</div>
            </el-card>
            <el-card class="mt-3" shadow="never">
              <div class="pb-3 text-14">中控:离线</div>
            </el-card>

          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
/**
 * 面板控制
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { useRoute,useRouter } from 'vue-router'

const emit = defineEmits(['goClass']);

// ======================================================
//                      变量声明
// ======================================================
const authStore = useAuthStore();
const route = useRoute()
const routes = useRouter()
let id = route.query.id;

// 数据
const dataOfTable = ref([]);
// 查询参数
const queryParam = ref({
  q: '',
  search: '',
  orderby: '',
  group_id: 0,
  page: 1,
  pageSize: 10,
})
const radioPassage = ref('-1');


// ======================================================
//                      处理事件
// ======================================================

const goBack = () => {
  if (id) {
    routes.go(-1);

  } else {
    emit('goClass')

  }
}
const loadData = () => {
  EsAjax.post(ApiUrls.roomBusy, queryParam.value).then(res => {
    console.error('教室详情', res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfTable.value = res.data.data.data;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}


defineExpose({
  loadData
})

// loadData();
</script>
<style lang="less" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
</style>

